<template>
	<!-- 公司名称，姓名，职位，地址，联系电话，营业执照等 -->
	<view class="page">
		<view class="form-box">
			<u-form ref="uForm" :model="model" :rules="rules" labelWidth="180" labelAlign="left" labelPosition="left"
				:labelStyle="{marginLeft: '30rpx'}">
				<u-form-item label="公司" prop="company" borderBottom required>
					<u-input maxlength="50" v-model="model.company" border="none" :customStyle="inputCustomStyle"
						placeholder='请输入公司名称' disabled></u-input>
				</u-form-item>
				<u-form-item label="原提交人" prop="name" borderBottom required>
					<u-input maxlength="25" v-model="model.name" border="none" :customStyle="inputCustomStyle"
						placeholder='请输入提交人' disabled></u-input>
				</u-form-item>
				<u-form-item label="职位" prop="position" borderBottom required>
					<u-input maxlength="25" v-model="model.position" border="none" :customStyle="inputCustomStyle"
						placeholder='请输入职位'></u-input>
				</u-form-item>
				<u-form-item label="地址" prop="address" borderBottom required>
					<u-input maxlength="150" v-model="model.address" border="none" :customStyle="inputCustomStyle"
						placeholder='请输入公司地址'>
					</u-input>
				</u-form-item>
				<u-form-item label="电话" prop="phone" borderBottom required>
					<u-input v-model="model.phone" border="none" :customStyle="inputCustomStyle" placeholder='请输入联系电话'></u-input>
				</u-form-item>
				<u-form-item label="营业执照" prop="license" required labelPosition="top">
					<view class="upload-box">
						<u-upload :fileList="fileListLicense" name="License" :maxCount="1" multiple width="686rpx" height="320rpx"
							@afterRead="afterRead" @delete="deletePic">
							<view class="upload-custom">
								<u-icon name="plus" color="#86909C" size="48rpx"></u-icon>
								<text class="upload-custom-text">上传营业执照</text>
							</view>
						</u-upload>
					</view>
				</u-form-item>
			</u-form>
		</view>

		<view class="submit-box">
			<u-button color="#276AEE" throttleTime="500" :customStyle="{height:'88rpx',fontSize: '30rpx'}"
				@click="submit">提交</u-button>
		</view>
		<u-modal :show="showGuidePop" closeOnClickOverlay @close="confirmGuidePop" @confirm="confirmGuidePop">
			<view class="slot-content">
				<view style="font-size: 32rpx;font-weight: 500;color: #1D2129;line-height: 52rpx;">
					正在审核中,请耐心等待
				</view>
				<view @click="callCustomerService(customerService)"
					style="margin-top: 20rpx; font-size: 32rpx;font-weight: 500;color: #60A8FF;line-height: 60rpx;">
					客服电话:{{customerService}}
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import baseConfig from '@/config/baseUrl.js'
	export default {
		data() {
			return {
				inputCustomStyle: {
					padding: '10rpx 0'
				},
				model: {
					id: '',
					position: '',
					name: '',
					phone: '',
					address: '',
					company: '',
					license: '',
					creditCode: ''
				},
				showGuidePop: false,
				customerService: '15163336721',
				fileListLicense: [],
				rules: {
					// 对name字段进行必填验证
					company: [{
						required: true,
						message: '请输入公司名称',
						trigger: ['change', 'blur'],
					}, ],
					name: [{
						required: true,
						message: '请输入姓名',
						trigger: ['change', 'blur'],
					}, ],
					position: [{
						required: true,
						message: '请输入职位',
						trigger: ['change', 'blur'],
					}, ],
					address: [{
						required: true,
						message: '请输入公司地址',
						trigger: ['change', 'blur'],
					}, ],
					//手机号校验
					phone: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								return uni.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							trigger: ['change', 'blur'],
						}
					],
					license: [{
						required: true,
						message: '请上传营业执照',
						trigger: ['change', 'blur'],
					}, ],
				}
			};
		},
		computed: {
			...mapGetters(['userInfo']),
		},
		watch: {
			fileListLicense: {
				handler(nVal) {
					this.$set(this.model, 'license', nVal.map(item => item.url).join(','))
					this.$refs.uForm.validateField(['license'])
				},
				deep: true
			}
		},
		onLoad(option) {
			this.model.id = option.companyId
			this.getDBDetail()
		},
		onReady() {
			//onReady 为uni-app支持的生命周期之一
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			async getDBDetail() {
				let params = {
					id: this.model.id
				}
				let res = await this.$api.queryCompanyManage(params)
				if (res.success) {
					this.model = res.result || {}

					if (res.result.license) {
						this.fileListLicense = JSON.parse(JSON.stringify([{
							url: res.result.license
						}]))
					}
				}
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				console.log('新增图片', event);
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: event.name,
						url: result,
						fileName: event.file.type + event.file.size + '',
						filePath: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: baseConfig.uploadUrl + '/sys/common/upload',
						filePath: url,
						name: 'file',
						success: (res) => {
							let data = JSON.parse(res.data)
							if (data.success) {
								resolve(data.message)
							}
						}
					});
				})
			},
			submit() {
				// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
				this.$refs.uForm.validate().then(res => {
					let payload = {
						...this.model,
						openId: this.userInfo.openId,
						cardId: this.userInfo.id,
					}
					this.$api.editCompanyAttestation(payload).then(res => {
						if (res.success) {
							uni.showToast({
								title: '提交成功！',
								icon: 'none'
							});
							this.$api.queryCurrentCardByOpenId({
								openId: payload.openId
							})
							// this.showGuidePop = true
							setTimeout(() => {
								uni.navigateBack()
							}, 1000)

						} else {
							uni.showToast({
								title: res.message || '提交失败！',
								icon: 'none'
							});
						}
					})
				}).catch(errors => {
					console.log(errors);
				})
			},
			callCustomerService(phoneNumber) {
				uni.makePhoneCall({
					phoneNumber
				})
			},
			confirmGuidePop() {
				this.showGuidePop = false
				uni.navigateBack()
			}
		}
	}
</script>
<style lang="scss">
	page {
		background-color: #F7F8FA;
	}

	.page {
		padding-bottom: calc(206rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(206rpx + env(safe-area-inset-bottom));
	}

	::v-deep.form-box {
		padding: 32rpx;
		background-color: #fff;

		.u-form-item__body__left__content__required {
			left: 0 !important;
		}

		.upload-box {
			margin-top: 16rpx;

			.upload-custom {
				width: 686rpx;
				height: 320rpx;
				background-color: #F7F8FA;

				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.upload-custom-text {
					margin-top: 16rpx;
					font-size: 32rpx;
					color: #86909C;
					line-height: 44rpx;
				}
			}

			.u-upload__deletable {
				width: 56rpx;
				height: 56rpx;

				.uicon-close {
					font-size: 40rpx !important;
					line-height: 40rpx !important;
				}
			}

			.u-upload__success {
				border-width: 30rpx !important;

				.u-upload__success__icon {
					bottom: -30rpx !important;
					right: -30rpx !important;

					.uicon-checkmark {
						font-size: 40rpx !important;
						line-height: 40rpx !important;
					}
				}
			}
		}
	}

	.submit-box {
		position: fixed;
		bottom: constant(safe-area-inset-bottom);
		bottom: env(safe-area-inset-bottom);
		width: 100%;
		padding: 16rpx 48rpx;
		box-sizing: border-box;
	}
</style>
